import React, {useContext, useEffect, useImperativeHandle} from 'react';
import MakePhoneCallModal from './MakePhoneCallModal';
import '../../global.scss'
import Context, {MyContext} from "../../store";
import {ContactCenterProps} from "../../types";
import {createSip} from "../../store/sip/action";
import CallOperationDesk from './CallOperationDeskModal';

const App = (props: ContactCenterProps) => {
  const {sipContext, sipDispatch} = useContext(MyContext)

  useEffect(() => {
    // 拿到配置文件自动注册
    if (props.options && !sipContext?.sipClient) {
      createSip(sipDispatch, props.onRegister, props.options)
    }
  }, [props.options])

  useImperativeHandle(props.ref, () => {
    // 暴露一些方法给外部使用
    return {};
  }, []);

  return (
    <>
      {/*电或来电通知弹窗*/}
      <MakePhoneCallModal/>
      {/*电话拨打控制台*/}
      <CallOperationDesk></CallOperationDesk>
    </>

  );
};

const ContactCenter = React.forwardRef((props: ContactCenterProps, ref?: React.ForwardedRef<any>) => {
  return <>
    <Context>
      <App {...props} ref={ref}></App>
    </Context>
  </>
});

export default ContactCenter;
